<template>
	<view style="">
		<block v-for="(item,diyitemid) in pageitems" :key="diyitemid">
			<block v-if="item.type=='topNav'">
				<my-navbar :name="item.params.title" :bgColor="item.style.navColor" :fontColor="item.style.titleColor" :back="navback"></my-navbar>
			</block>
			<block v-if="item.type=='image'">
				<uvImage :item="item" ></uvImage>
			</block>
			<block v-if="item.type=='text'">
				<uvText :item="item"></uvText>
			</block>
			<block v-if="item.type=='line'">
				<uvLine :item="item"></uvLine>
			</block>
			<block v-if="item.type=='notice'">
				<uvNotice :item="item"></uvNotice>
			</block>
			<block v-if="item.type=='magic'">
				<uvMagic :item="item"></uvMagic>
			</block>
			<block v-if="item.type=='blank'">
				<uvBlank :item="item"></uvBlank>
			</block>
			<block v-if="item.type=='nav'">
				<uvNav :item="item"></uvNav>
			</block>
			<block v-if="item.type=='video'">
				<uvVideo :item="item"></uvVideo>
			</block>
			<block v-if="item.type=='content'">
				<uvParse :item="item"></uvParse>
			</block>
			<block v-if="item.type=='carrental'">
				<carRental :item="item" @submit="carRentalSubmit"></carRental>
			</block>
			<block v-if="item.type=='comment'">
				<comment></comment>
			</block>
        </block>
	</view>
</template>

<script>

	import uvImage from './uvImage';
	import uvText from './uvText';
	import uvLine from './uvLine';
	import uvNotice from "./uvNotice";
	import uvMagic from "./uvMagic";
	import uvBlank from "./uvBlank";
	import uvNav from "./uvNav";
	import uvVideo from "./uvVideo";
	import uvParse from "./uvParse";
	import carRental from './car-rental.vue';
	import comment from './comment.vue';

    export default {
		props: {
            pageitems: {
                type: Array,
                default: () => []
            },
			navback:{
				type:Boolean,
				default:true
			}
        },
        components:{
			uvImage,
			uvText,
			uvLine,
			uvNotice,
			uvMagic,
			uvBlank,
			uvNav,
			uvVideo,
			uvParse,
			carRental,
			comment,
        },
		data() {
			return {
            };
		},
        methods: {
			// 提交表单
			carRentalSubmit(){
				this.$emit('submit');
			}
        },
	}
</script>

<style lang="scss">
/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $u-info;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	.m-t{
		margin-top: 16upx;
	}
	/* 分类 */
    .navbar{
        display: flex;
        height: 40px;
        padding: 0 5px;
        background: #fff;
        overflow-y:hidden;
        overflow-x:scroll;
        .nav-item{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 15px;
            color: $u-info-dark;
            position: relative;
            &.current{
               font-weight: bold;
                &:after{
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    width: 44px;
                    height: 0;
                    border-bottom: 2px solid #D0021B;
                }
            }
        }
    }
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	.goods_box{
        width: 95%;
        margin: 0 auto;
        .goods_item{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 300rpx;
            margin-top: 35rpx;
            background-color: white;
            border-radius: 25rpx;
            .img{
                width: 35%;
                image{
                    border-radius: 15rpx;
                    width: 100%;
                    height: 240rpx;
                }
            }
            .nav{
                width: 54%;
                height: 220rpx;
                margin-left: 5%;
                .title{
                    font-size: 30rpx;
                    font-weight: bold;
                    height: 130rpx;
                }
                .foot{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .price{
                        font-weight: bold;
                    }

                }
                .tobuy{
                    text-align: center;
                    background-color: #CC2E2F;
                    color: #FFFFFF;
                    padding: 2rpx 30rpx;
                    border-radius: 30rpx;
                    width: 150rpx;
                }
            }
        }
    }
</style>

